<template>
  <div class="center_bottom">
    <el-tabs tab-position="left" style="display: flex;flex-direction: row;align-items: center;">
      <el-tab-pane>
        <span slot="label">
          <el-button class="b-cyxz b1"></el-button>
        </span>
        <el-image :src="require('@/assets/img/datav/cyxz/centerTwo/c1.png')"></el-image>
      </el-tab-pane>
      <el-tab-pane>
        <span slot="label">
          <el-button class="b-cyxz b2"></el-button>
        </span>
        <el-image :src="require('@/assets/img/datav/cyxz/centerTwo/c2.png')"></el-image>
      </el-tab-pane>
      <el-tab-pane>
        <span slot="label">
          <el-button class="b-cyxz b3"></el-button>
        </span>
        <el-image :src="require('@/assets/img/datav/cyxz/centerTwo/c3.png')"></el-image>
      </el-tab-pane>
      <el-tab-pane>
        <span slot="label">
          <el-button class="b-cyxz b4"></el-button>
        </span>
        <el-image :src="require('@/assets/img/datav/cyxz/centerTwo/c4.png')"></el-image>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: {},
    };
  },
  props: {

  },
  mounted() {
  },
  methods: {

  },

}
</script>
<style lang="scss" scoped>
.center_bottom {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  .echarts_bottom {
    width: 100%;
    height: 100%;
  }
  ::v-deep .el-tabs{
    .el-tabs__header{
      .el-tabs__nav-wrap{
        .el-tabs__nav-scroll{
          .el-tabs__nav{
            .el-tabs__active-bar{
              display: none;
            }
            .el-tabs__item{
              width: 164px;
              height: 51px;
              padding: 0;
              text-align: center;
              line-height: 51px;
              font-size: 30px;
              color: #FFE8A9;
              border-radius: 4px;
            }
          }
        }
      }
    }
    .el-tabs__nav-wrap::after{
      display: none;
    }
  }
  .b-cyxz{
    width: 164px;
    height: 41px;
    //border: 2px dashed;
    border-radius: 3px;
    background: none;
    border: none;
  }
  .b-cyxz:focus{
    border: 2px solid #00eded;
    border-radius: 3px;
  }
  .b1{
    background-image: url("../../assets/img/datav/cyxz/centerTwo/b1.png");
  }
  .b2{
    background-image: url("../../assets/img/datav/cyxz/centerTwo/b2.png");
  }
  .b3{
    background-image: url("../../assets/img/datav/cyxz/centerTwo/b3.png");
  }
  .b4{
    background-image: url("../../assets/img/datav/cyxz/centerTwo/b4.png");
  }
}
</style>
